<!doctype html>
<html>

<head>
  <title>Timeline</title>
  <script type="text/javascript"
    src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
  <link href="https://unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet"
    type="text/css" />
  <style type="text/css">
    #visualization {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
</head>

<body>
  <div id="visualization"></div>
  <script type="text/javascript">
    // DOM element where the Timeline will be attached
    var container = document.getElementById('visualization');

    // Create a DataSet (allows two way data-binding)
    var items = new vis.DataSet([
      { id: 1, content: 'item 1', start: '1970-01-01 00:00:00' },
      { id: 2, content: 'item 2', start: '1970-01-01 00:00:00' },
      { id: 4, content: 'item 4', start: '1970-01-01 00:00:00', end: '1970-01-01 02:00:00' },
      { id: 6, content: 'item 6', start: '2014-04-27', type: 'point' }
    ]);

    // Configuration for the Timeline
    var options = {};

    // Create a Timeline
    var timeline = new vis.Timeline(container, items, options);
  </script>
</body>

</html>